<template>
    <el-dialog :visible.sync="detailsDialogVisible" width="60%" :fullscreen="isMobileScreen">
        <div>
            <h3 class="dialog-title">用户详情</h3>
            <div style="flex: 1 0 100%; overflow-y: scroll;">
                <!-- 个人信息部分 -->
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>用户信息：</span>
                    </div>
                    <div class="text item">
                        <div class="detail-row">
                            <div class="detail-item">
                                <p><strong>姓名:</strong> {{ selectedRow.trealname }}</p>
                            </div>
                            <div class="detail-item">
                                <p><strong>年龄:</strong> {{ selectedRow.age }} 岁</p>
                            </div>
                            <div class="detail-item">
                                <p><strong>性别:</strong> {{ selectedRow.sex === 1 ? '男' : '女' }}</p>
                            </div>
                        </div>
                        <div class="detail-row">
                            <!-- <div class="detail-item">
                                <p><strong>手机号:</strong> <span style="color: blue;">{{
                                    isHavePermission(['merchantdata:poolInfo:mobile']) ? selectedRow.mobile :
                                        '***********' }}</span></p>
                            </div> -->
                            <div class="detail-item">
                                <p>
                                    <strong>手机号:</strong>
                                    <span style="color: blue;">
                                        <a v-if="isHavePermission(['merchantdata:poolInfo:mobile'])"
                                            :href="'tel:' + selectedRow.mobile" style="color: blue;">
                                            {{ selectedRow.mobile }}
                                        </a>
                                        <span v-else>***********</span>
                                    </span>
                                </p>
                            </div>


                            <div class="detail-item">
                                <p><strong>省份:</strong> {{ selectedRow.province }}</p>
                            </div>
                            <div class="detail-item">
                                <p><strong>城市:</strong> {{ selectedRow.city }}</p>
                            </div>
                        </div>
                        <div class="detail-row">
                            <div class="detail-item">
                                <p><strong>学历:</strong> {{ selectedRow.xueli }}</p>
                            </div>
                            <div class="detail-item">
                                <p><strong>工作:</strong> {{ selectedRow.gongzuo }}</p>
                            </div>
                            <div class="detail-item">
                                <p><strong>薪资:</strong> {{ selectedRow.shouru }}</p>
                            </div>
                        </div>
                    </div>
                </el-card>

                <div style="margin-bottom: 20px;"></div>

                <!-- 资质信息部分 -->
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>资质信息：</span>
                    </div>
                    <div class="text item">
                        <div class="detail-row">
                            <div class="detail-item">
                                <p><strong>贷款金额:</strong> {{ selectedRow.loanAmount }}</p>
                            </div>
                            <div class="detail-item">
                                <p><strong>贷款时间:</strong> {{ selectedRow.loanTime }}</p>
                            </div>
                            <div class="detail-item">
                                <p><strong>贷款用途:</strong> {{ selectedRow.yongtu }}</p>
                            </div>
                        </div>
                        <div class="detail-row">
                            <div class="detail-item">
                                <p><strong>芝麻分数:</strong> {{ selectedRow.zhima }}</p>
                            </div>
                            <div class="detail-item">
                                <p><strong>花呗:</strong> {{ selectedRow.huabei }}</p>
                            </div>
                            <div class="detail-item">
                                <p><strong>白条:</strong> {{ selectedRow.baitiao }}</p>
                            </div>
                        </div>
                        <div class="detail-row">
                            <div class="detail-item">
                                <p><strong>房产:</strong> {{ selectedRow.house }}</p>
                            </div>
                            <div class="detail-item">
                                <p><strong>车产:</strong> {{ selectedRow.car }}</p>
                            </div>
                            <div class="detail-item">
                                <p><strong>是否逾期:</strong> {{ selectedRow.yuqi }}</p>
                            </div>
                        </div>
                        <div class="detail-row">
                            <div class="detail-item">
                                <p><strong>商业保险:</strong> {{ selectedRow.baoxian }}</p>
                            </div>
                            <div class="detail-item">
                                <p><strong>社保:</strong> {{ selectedRow.shebao }}</p>
                            </div>
                            <div class="detail-item">
                                <p><strong>公积金:</strong> {{ selectedRow.gjj }}</p>
                            </div>
                        </div>
                    </div>
                </el-card>

                <div style="margin-bottom: 20px;"></div>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="closeDetailsDialog">关闭</el-button>
        </span>
    </el-dialog>
</template>
<style scoped>
.detail-row {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.detail-item {
    flex: 1;
    margin-right: 20px;
}



.dialog-footer {
    text-align: right;
}

.dialog-title {
    text-align: center;
    font-size: 20px;
    margin-top: -20px;
    margin-bottom: 10px;
    /* 用户详情标题的样式，您可以根据需要进行调整 */
}
</style>
<script>
import { listSourceInfo } from "@/api/member/sourceInfo";
import { isHavePermission } from '@/directive/permission/hasPermi'
export default {
    computed: {
        isMobileScreen() {
            return window.innerWidth <= 768;
        },
    },
    name: "member",
    data() {
        return {
            detailsDialogVisible: false, // 弹窗可见状态
            selectedRow: {},
            sourceInfoList: [],
        };
    },
    methods: {
        isHavePermission,
        show(uid) {
            this.handleDetailsDialog(uid)
        },
        async handleDetailsDialog(uid) {
            try {
                const response = await listSourceInfo({ uid });
                this.selectedRow = response.rows[0];
                this.detailsDialogVisible = true;
            } catch (error) {
                console.error("Error fetching details:", error);
                this.$message.error("Failed to fetch details information.");
            }
        },
        closeDetailsDialog() {
            this.selectedRow = {};
            this.detailsDialogVisible = false;
        },


    }
};
</script>